<template>
    <el-card shadow="never">
        <div slot="header">动态表单(inputNumber)</div>
        <DynamicForm :schema="schema" :rules="rules" :formData="formData"></DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
import CodeTpl from './md/inputNumber.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    num1: {
                        label: '数字',
                        widget: 'inputNumber',
                        col: {
                            span: 6
                        },
                        ui: {
                            placeholder: '请输入'
                        }
                    },
                    num2: {
                        label: '禁用',
                        widget: 'inputNumber',
                        col: {
                            span: 6
                        },
                        ui: {
                            disabled: true,
                            placeholder: '请输入'
                        }
                    },
                    num3: {
                        label: '步数',
                        widget: 'inputNumber',
                        col: {
                            span: 6
                        },
                        ui: {
                            step: 0.01,
                            placeholder: '请输入'
                        }
                    },
                    num4: {
                        label: '最大最小',
                        widget: 'inputNumber',
                        col: {
                            span: 6
                        },
                        ui: {
                            min: 0,
                            max: 3,
                            placeholder: '请输入'
                        }
                    },
                    num5: {
                        label: '精度2',
                        widget: 'inputNumber',
                        col: {
                            span: 6
                        },
                        ui: {
                            precision: 2,
                            placeholder: '请输入'
                        }
                    },
                    num6: {
                        label: '位置',
                        widget: 'inputNumber',
                        col: {
                            span: 6
                        },
                        ui: {
                            controlsPosition: 'right',
                            placeholder: '请输入'
                        }
                    }
                }
            },
            rules: {
                num1: [
                    {required: true, message: '请填写数字', trigger: 'blur'}
                ]
            },
            formData: {
                num1: 1,
            }
        }
    },
}
</script>

<style>

</style>